<template>
  <div class="zhuamian">
    <a-tooltip :mouseEnterDelay="1" placement="top">
      <div slot="title">
        <span class="content_title">设备名称：</span>
        {{ '抓棉机' + tooltipData.deviceNo + '组' }}
        <br />
        <span class="content_title">设备状态：</span>
        {{ getHeadName(tooltipData.status) }}
        <br />
        <span class="content_title">设备效率：</span>
        {{ Number(tooltipData.efficiency * 100).toFixed(2) }}%
        <br />
        <span class="content_title">生产品种：</span>
        <!-- R50SAA-1 -->
        {{ tooltipData.productTypeTxt }}
        <br />
        <span class="content_title">更新时间：{{ $moment(tooltipData.updateTime).format('YYYY-MM-DD HH:mm:ss') }}</span>
      </div>
      <div class="zhuamian-content">
        <svg
          width="99px"
          height="33px"
          viewBox="0 0 99 33"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink"
        >
          <g id="大屏" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
            <g id="首页" transform="translate(-1796.000000, -191.000000)">
              <g id="编组-26" transform="translate(1796.516129, 192.000000)">
                <path
                  d="M19.483871,4 L90.483871,4 L90.483871,4 L90.483871,27 L19.483871,27 C18.9315862,27 18.483871,26.5522847 18.483871,26 L18.483871,5 C18.483871,4.44771525 18.9315862,4 19.483871,4 Z"
                  id="矩形备份-140"
                  :style="bodyStyle"
                  fill="#006BCE"
                  transform="translate(54.483871, 15.500000) scale(-1, -1) translate(-54.483871, -15.500000) "
                ></path>
                <path
                  d="M10.483871,4 L19.483871,4 L19.483871,4 L19.483871,27 L10.483871,27 C9.93158622,27 9.48387097,26.5522847 9.48387097,26 L9.48387097,5 C9.48387097,4.44771525 9.93158622,4 10.483871,4 Z"
                  id="矩形备份-139"
                  :style="headStyle"
                  fill="#006BCE"
                ></path>
                <rect id="矩形" stroke="#8FCDFA" stroke-width="0.5" x="0" y="10.5" width="96" height="10" rx="1"></rect>
                <text
                  id="抓棉机1组"
                  font-family="PingFang-SC-Medium, PingFang SC"
                  font-size="12"
                  font-weight="400"
                  line-spacing="10"
                  fill="#FFFFFF"
                >
                  <tspan x="28.483871" y="20">抓棉机{{ tooltipData.deviceNo }}组</tspan>
                </text>
                <rect id="矩形" stroke="#8FCDFA" x="1.48387097" y="0" width="96" height="31" rx="1"></rect>
              </g>
            </g>
          </g>
        </svg>
        <div v-if="inline" class="zhuamian-xiaolv">
          {{ Number(tooltipData.efficiency * 100).toFixed(2) + '%' }}
        </div>
      </div>
    </a-tooltip>
  </div>
</template>

<script>
import { mul } from '@/utils/caculate'
export default {
  name: 'zhuamian',
  props: {
    data: Object,
    // 是否嵌套在弹窗内
    inline: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      headStyle: {
        fill: ''
      },
      bodyStyle: {
        fill: ''
      },
      tooltipData: {
        deviceNo: 0,
        deviceName: null,
        efficiency: 0,
        productType: null,
        productTypeTxt: null,
        status: 0,
        updateTime: null
      }
    }
  },
  watch: {
    data: {
      deep: true, //true 深度监听
      immediate: true,
      handler() {
        this.draw()
      }
    }
  },
  mounted() {
    this.draw()
  },
  methods: {
    draw() {
      if (this.data) {
        this.tooltipData = { ...this.data }
        this.headStyle.fill = this.getHeadColor(this.tooltipData.status)
        this.bodyStyle.fill = this.getBodyColor(this.tooltipData.efficiency)
      }
    },
    //尾灯表示车台状态（运行、停止、故障、满纱满桶、通讯失败)
    getHeadColor(status) {
      switch (parseInt(status)) {
        //运行
        case 1:
          return '#7CBC44'
        //停止
        case 2:
          return '#888F93'
        //故障
        case 3:
          return '#6D000E'
        //满纱满桶
        case 4:
          return '#ECCD54'
        //通讯失败
        case 5:
          return '#EB4E27'
        // 计划停台
        case 6:
          return 'url(#jhttqh)'
      }
    },
    //尾灯表示车台状态（运行、停止、故障、满纱满桶、通讯失败)
    getHeadName(status) {
      switch (parseInt(status)) {
        //运行
        case 1:
          return '运行'
        //停止
        case 2:
          return '停止'
        //故障
        case 3:
          return '故障'
        //满纱满桶
        case 4:
          return '满纱满桶'
        //通讯失败
        case 5:
          return '通讯失败'
        // 计划停台
        case 6:
          return '计划停台'
      }
    },
    //车身颜色渐变表示车台当前效率范围
    getBodyColor(stateCode1) {
      let stateCode = Number(stateCode1) * 100
      if (stateCode >= 90) {
        return '#2D69C7'
      } else if (90 > stateCode && stateCode >= 80) {
        return '#ECCD54'
      } else if (80 > stateCode && stateCode > 70) {
        return '#ECCD54'
      } else if (stateCode <= 70) {
        return '#EB4E27'
      }
    }
  }
}
</script>

<style lang="less" scoped>
@import '~@/assets/less/workshop.less';
.cls-1,
.cls-2 {
  stroke: #82c4fa;
  stroke-linejoin: round;
  stroke-width: 2px;
}

.cls-1 {
  fill: url(#linear-gradient);
}

.cls-2 {
  fill: #519aff;
}

.cls-3 {
  font-size: 28.172px;
  fill: #fff;
  font-family: 'Microsoft YaHei';
  font-weight: 700;
}
.zhuamian-content {
  position: relative;
}
.zhuamian-xiaolv {
  font-size: 10px;
  font-weight: 400;
  color: #fff;
  transform: scale(0.6);
  position: absolute;
  white-space: nowrap;
  right: -34px;
  top: 8px;
  width: 32px;
  text-align: left;
}
</style>
